<template>
  <div class="home-container">

    <banner :bannerList = "bannerList"></banner>
    <the-new-songs :newSongList = "newSongList"></the-new-songs>
    <the-new-song-menu :recommendMusicMenuList = "recommendMusicMenuList"></the-new-song-menu>
    <the-recommend-mv :newMVList = "newMVList"></the-recommend-mv>
    

      
        
  

  </div>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
import { useStore } from 'vuex'
import { ref,reactive,onMounted, onUpdated } from "vue";
import { HttpManager } from "../api/index";
import Banner from "../components/Home/Banner.vue";
import TheNewSongs from "../components/Home/The-New-Songs.vue";
import TheNewSongMenu from "../components/Home/The-New-Song-Menu.vue"
import TheRecommendMv from "../components/Home/The-Recommend-MV.vue"

interface bannerRes{
    banners:[],
    code:number
}

interface newSong{
    data:[]
};

interface recoomendMM{
    result:[]
}
interface newMV{
    data:[]
}
export default defineComponent({
  setup() {


    let bannerList = ref([]);
    let newSongList = ref([]);
    let recommendMusicMenuList = ref([]);
    let newMVList = ref([]);

    HttpManager.getBanner({ type: "0" }).then((res:bannerRes) => {


        bannerList.value = res.banners;
    });  

    HttpManager.getNewSong({ type: "0" ,limit:10}).then((res:newSong) => {


        newSongList.value = res.data;
        // console.log("newSongList", newSongList.value);
        
    }); 

    HttpManager.getRecommendMusicMenu({limit:10}).then((res:recoomendMM) => {
        recommendMusicMenuList.value = res.result;
        // console.log("recoomendMusicMenuList", recommendMusicMenuList.value);
    })

    HttpManager.getNewMV({limit:6}).then((res:newMV) => {
        console.log("mvres",res.data);
        
        newMVList.value = res.data;
        console.log("newMV", newMVList.value);
    })

    return {
      recommendMusicMenuList,
      newSongList,
      bannerList,
      newMVList
    };
  },
  components: { Banner, TheNewSongs, TheNewSongMenu, TheRecommendMv},
});
</script>
 
<style lang = "scss" scoped>
@import "../assets/css/home.scss";
</style>